<template>
    <div  id="bottomfix">
 <!-- f8f9f9 -->
        <van-popup  teleport="#bottomfix" safe-area-inset-bottom v-model="show" close-icon-position="top-left" 
        position="bottom" :overlay=false
        duration="0.3"
      :style="{ height: '6.5rem', backgroundColor: '#ccc' , position:'fixed'  , bottom:'0.1px'}">
      <div class="changhtml" v-show="change != 1" @click.stop="">
        <div style="text-align: center;">
          <p class="partNum">
           
          </p>
          <!-- <div class="press">
        
            <span class="fontA">A-</span>
          <slot name="fsnum">
                <van-slider step="0.01" min="0.3" max="1.6" bar-height="4px" active-color="#ee0a24" />
            </slot>
       
            <span class="fontA">A+</span>
          </div> -->
          <van-divider />
          <div class="fontbgcolor">
            <div class="box" v-for=" ( item, index )  in bgcolorArr" :style="{ backgroundColor: item }"
              @click="$store.commit( 'CHANGDE_INDEX',index)" :class="{ selectbox: $store.getters.XselecedIndex == index, }">

              <i v-show="$store.getters.XselecedIndex == index" class="iconfont icon-icon_669"> </i>
            </div>
          </div>

        </div>




      </div>
      <!-- 进度条 -->
      <div class="changhtml" v-show="change != 2" @click.stop="">
        <div style="text-align: center;">
          <slot name="partNum"> 
          <!-- <p class="partNum">
            章节2 | 1.1%
        
          </p> -->
          <div class="press">
            <div class="inner"> <i class="iconfont icon-yuyinjiantou"></i> </div>

          进度条
           
            <div lass="inner"> <i class="iconfont icon-yuyinjiantou"></i> </div>

          </div>
        </slot>
          <van-divider />


        </div>




      </div>


      <!--  底部菜单 -->
      <div class="bottomment flex">

        <div class="dot" @click.stop="$emit( 'leftchangde')">
          <i class="iconfont icon-caidan"> </i>
          <br>
     
        </div>
        <div class="dot" @click.stop="change = 1">
          <i class="iconfont icon-jindutiao"> </i>
          <br>
         
        </div>
        <div class="dot" @click.stop="change = 2">
          <i class="iconfont icon-font-size"> </i>
          <br>
       
        </div>
        <div class="dot" @click.stop="$store.commit('CHANGE_YE')">
          <i v-show="$store.getters.getye" class="iconfont icon-yejian"> </i>
          <!-- <i   class="iconfont icon-rijianmoshixhdpi"> </i> -->
   <svg v-show="!$store.getters.getye" t="1669893686090" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1190" width="30" height="30"><path d="M512.640801 798.010847a289.001252 289.001252 0 1 1 288.14685-289.001252A289.428452 289.428452 0 0 1 512.640801 798.010847z m0-513.922403a224.921151 224.921151 0 1 0 224.06675 224.921151A225.134752 225.134752 0 0 0 512.640801 284.088444zM274.476429 291.564456a32.04005 32.04005 0 0 1-21.360034-8.544014L178.142678 213.600334a32.04005 32.04005 0 0 1 43.788069-46.778473l74.546516 69.847309a32.04005 32.04005 0 0 1-21.360033 55.322486zM64.0801 536.991239a32.04005 32.04005 0 0 1 0-64.0801L165.113058 469.920734a32.04005 32.04005 0 0 1 1.922403 64.0801l-101.887359 3.204005zM190.958698 856.110138a31.82645 31.82645 0 0 1-23.496036-53.827284l69.847309-74.546517a32.25365 32.25365 0 0 1 45.283271-1.495202 31.82645 31.82645 0 0 1 1.495202 45.283271L213.600334 846.070922a32.25365 32.25365 0 0 1-22.641636 10.039216zM506.232791 992.17355A32.04005 32.04005 0 0 1 474.192741 961.201502l-3.204005-101.887359a32.04005 32.04005 0 1 1 64.0801-2.136004l3.417605 102.10096a32.25365 32.25365 0 0 1-31.185648 33.108052zM825.35169 865.294952a31.399249 31.399249 0 0 1-21.360034-8.757614l-74.546516-69.847309a32.04005 32.04005 0 0 1 44.001669-46.564873l74.332916 69.84731a31.82645 31.82645 0 0 1 0.854401 44.428869 32.680851 32.680851 0 0 1-23.282436 10.893617zM859.100542 553.224864a32.04005 32.04005 0 0 1 0-64.0801l102.10096-3.204005a32.04005 32.04005 0 0 1 2.136003 64.0801l-102.100959 3.204005zM764.475594 305.448477a32.25365 32.25365 0 0 1-21.360033-8.757613 31.82645 31.82645 0 0 1-1.495202-45.283271L811.681268 177.074677a32.04005 32.04005 0 1 1 46.778473 43.788068l-69.847309 74.332916a32.04005 32.04005 0 0 1-24.136838 10.252816z" p-id="1191" fill="#ffffff"></path><path d="M522.252816 196.939508A31.82645 31.82645 0 0 1 491.280768 165.967459L487.008761 64.0801a32.04005 32.04005 0 0 1 31.185649-32.894451A31.399249 31.399249 0 0 1 551.088861 61.944097l4.272007 102.100959a31.82645 31.82645 0 0 1-32.04005 32.894452z" p-id="1192" fill="#ffffff"></path></svg>
          <br>
          <!-- {{ $store.getters.getye ? 'dark' : 'lignt' }} -->
      
        </div>


      </div>
          </van-popup>

 
    </div>
</template>

<script>
    export default {
      
        props:['show','fontSize'  ,'bgcolorArr','selecedIndex'],
        data(){
            return { 
                change:2
                ,
                ye:true
            }
        },  
            methods:{

            }
    }
</script>

<style lang="scss" scoped>

.bottomment {

  overflow: hidden;
  height: 1rem;
  color: #000000;
  text-align: center;

  .iconfont {
    font-size: 0.8rem;
  }
}

.partNum{
  color: #ffff;
  margin: 0.3rem;
}

  .box {
    width: 1.8rem;
    height: 0.8rem;
    border: 1px solid #ffff;
    border-radius: 5px;
    border: 1.5px solid #191919;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

.fontbgcolor {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 0.3rem;
  overflow: hidden;
  height: 0.8rem;

  .selectbox {
    border: 1.5px solid #850108
  }

  .selectbox::after {
    width: 100%;
    height: 100%;


  }

  .icon-icon_669 {
    font-size: 0.6rem;
    color: #ed424b;
    font-weight: 800;

  }

}
.iconye{
  width: 0.3rem;
  background-color: #850108;
}
.press {
  display: flex;
  align-items: center;

  .icon-yuyinjiantou {
    font-size: 1.5rem;
    color: #ffff;
  }

  .fontA {
    font-size: 0.7rem;
    color: #ffff;
    margin: 0 0.6rem;
  }

  .inner:nth-child(1) {
    transform: rotate(90deg);
  }



}
</style>